<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./node_modules/babel-core/browser.min.js"></script>
</head>
<!--<script type="text/babel">-->

<!--</script>-->
<script type="module">

    // todo 相对或绝对路径, 加载多次，只会导入一次
    // 会自动优先执行import
    // import "./modules/first.jsx" // 将文件导入，作用不大，执行js文件中的代码
    console.log(`==========${"导入办法 "}====================`)
    import {a, b, c, d, e} from "./modules/first.js"
    import {a as abc} from "./modules/first.js"  // export import 都可以有别名
    console.log(a, b, c, d, e);
    console.log(abc);

    import * as all from "./modules/first.js" //一次性都 导入
    console.log(all.a);

    import add from "./modules/first.js" // 只有default 定义的不需要用 {}
    console.log(add);


    // console.log(`==========${"导入办法 "}====================`)

    import {data,sum,consoleprint} from "./modules/first.js"


    consoleprint("综合例子")
    console.log(sum(1,2));
    console.log(sum("1",2))
    console.log(data.age);
    console.log(data.showName());
    console.log(data.showAge())



    consoleprint("JS间相互引用")
    import {aa,bb} from "./modules/second.js"
    console.log(`这里是 second.js 引用first.js变量之后 +1`);
    console.log(`first.jsx a:${a},b:${b}`);
    console.log(`second.js aa:${aa},bb:${bb}`);

    consoleprint("有条件导入")
    // import 是个pormise
    import('./modules/first.js').then(res=>{
        console.log("success first.js");
        console.log(res.data);
    }).catch(err=>{
        console.log("fail first.js");
    });
</script>
<body>
<h1>要使用服务器方式</h1>
<div style="font-size: 20px">
    <div>python3
    python -m http.server 80
    </div>

    python2
    python -m SimpleHTTPServer 80
</div>
</body>
</html>